<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>房屋信息图像管理</title>
    <link th:replace="common/header"/>
    <link rel="stylesheet" th:href="@{/css/dropzone.css}"/>
    <script th:src="@{/js/dropzone/dropzone.js}"></script>
    <script>
        function deleteImage(id) {
            $("#tipName").text("确定删除吗？");
            $("#tipButton").click(function () {
                $.ajax({
                    url: '/system/houseImage/delete?id=' + id,
                    type: "post",
                    dataType: "text",
                    success: function (data) {
                        if (data == "ok") {
                            $("#" + id).remove();
                            Cancel();
                        }
                    }
                });
            });
            showDialog('layer');
        }
    </script>
</head>
<body class="no-skin">
<div th:replace="common/top"/>
<div class="main-container ace-save-state" id="main-container">
    <div th:replace="common/menu"/>
    <div class="main-content">
        <div class="main-content-inner">
            <div th:replace="common/title"/>
            <div class="page-content">
                <div th:replace="common/skin"/>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="page-content">
                            <div class="page-header">
                                <h1>
                                    上传房屋图像
                                    <small>
                                        <i class="icon-double-angle-right"></i>
                                        您可以随意拖放图像到对应的区域内
                                    </small>
                                </h1>
                            </div><!-- /.page-header -->
                            <div class="row-fluid">
                                <div class="span12">
                                    <div>
                                        <ul class="ace-thumbnails clearfix">
                                            <li th:each="image : ${list}">
                                                <a th:href="@{'/' + ${image.houseImg}}" data-rel="colorbox">
                                                    <img alt="" th:attr="id=${image.id}"
                                                         th:src="@{'/' + ${image.houseImg}}"
                                                         style="max-height: 150px; max-width: 150px;"/>
                                                    <div class="text">
                                                        <div class="inner">点击查看大图</div>
                                                    </div>
                                                </a>
                                                <div class="tools tools-bottom">
                                                    <a href="javascript:void(0);"
                                                       th:onclick="'deleteImage(\'' + ${image.id} + '\')'">
                                                        <i class="ace-icon fa fa-times red"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row-fluid">
                                <div class="span12">
                                    <!-- PAGE CONTENT BEGINS -->
                                    <div id="dropzone">
                                        <input type="hidden" name="id" id="id" th:value="${id}"/>
                                        <input type="hidden" name="path" id="path" th:value="${path}"/>
                                        <form th:action="@{'/houseImage/upload'}" action="#" method="POST"
                                              class="dropzone" enctype="multipart/form-data" name="form">
                                            <div class="fallback">
                                                <input name="file" type="file" multiple=""/>
                                            </div>
                                        </form>
                                        <span style="color:red"><span th:text="${msg}">Name Error</span>&nbsp;</span>
                                        <a shiro:hasPermission="/houseImage/upload" class="btn btn-primary"
                                           th:href="@{'/houseImage/uploadsubmit?path=' + ${path} + '&id=' + ${id}}"><i
                                                class="fa fa-floppy-o" aria-hidden="true"></i>提交</a>
                                        <a class="btn" href="getAll" th:href="@{'/' + ${path} + '/getAll'}"><i
                                                class="fa fa-reply" aria-hidden="true"></i>返回</a>
                                    </div><!-- PAGE CONTENT ENDS -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div><!-- /.page-content -->
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <div th:replace="common/footer"/>
</div><!-- /.main-container -->
<div th:replace="common/buttom"/>
<link rel="stylesheet" th:href="@{/css/colorbox.min.css}"/>
<script th:src="@{/js/colorbox/jquery.colorbox.min.js}"></script>
<script th:src="@{/js/colorbox/colorbox.js}"></script>
</body>
</html>
